<template>
  <div>
    <h3>vxe-table树形表格/懒加载案例</h3>
    <vxe-table
        border
        resizable
        ref="xTree"
        row-id="id"
        show-overflow
        :row-config="{isCurrent: true, isHover: true, height: 40}"
        :tree-config="{transform: true, rowField: 'id', parentField: 'parentId', lazy: true, hasChild: 'hasChild', loadMethod: loadChildrenMethod, iconLoaded: ''}"
        :data="tableData1">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name" width="300" tree-node></vxe-column>
      <vxe-column field="size" title="Size" width="250">
        <template #default = "{ row }">
          {{row.size}}
          <el-button v-if="row.hasChild" size="small" @click="handleClear(row)" >手动清空懒加载树节点的状态</el-button>
        </template>
      </vxe-column>
      <vxe-column field="type" title="Type"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
    </vxe-table>

  </div>
</template>

<script setup>

import {ref} from "vue";

let xTree = ref(null)
let tableData1 = ref([
  { id: 10000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
  { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01', hasChild: true },
  { id: 23666, parentId: null, name: 'Test23', type: 'mp4', size: null, date: '2021-01-02', hasChild: true },
  { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
])

function loadChildrenMethod ({ row }) {
  // 异步加载子节点
  return new Promise(resolve => {
    setTimeout(() => {
      const childs = [
        { id: row.id + 100000, parentId: row.id, name: row.name + 'Test45', type: 'mp4', size: null, date: '2021-10-03', hasChild: true },
        { id: row.id + 150000, parentId: row.id, name: row.name + 'Test56', type: 'mp3', size: null, date: '2021-07-09', hasChild: false }
      ]
      resolve(childs)
    }, 500)
  })
}

const handleClear = (row) => {
  xTree.value.clearTreeExpandLoaded(row);
};

</script>

<style scoped>

</style>